var aA = document.querySelectorAll(".nav>li>a");
var aUl = document.querySelectorAll(".min-nav");
// 左边的下拉菜单

for (var i = 0; i < aA.length; i++) {
    aA[i].onclick = function () {
        var oUl = this.nextElementSibling;
        if (getComputedStyle(oUl).height == "0px") {
            for (var j = 0; j < aUl.length; j++) {
                aUl[j].style.height = "0px";
                aA[j].className = "";
            }
            oUl.style.height =
                oUl.children[0].scrollHeight * oUl.children.length + "px";
            this.className = "active";
        } else {
            oUl.style.height = "0px";
        }
    };
}
var oImg = document.querySelector('.image1');
oImg.onclick = function () {
    history.back();
}
var data = [
    {
        ordinal: 1, receiptNumber: '20220704003', username: 'YH001', name: '王智勇', ipSrc: '11.21.31.11', CreationTime: '2022-7-4 17:14:12',
    },
    {
        ordinal: 2, receiptNumber: '20220704002', username: 'YH002', name: '孙志雅', ipSrc: '11.21.31.11', CreationTime: '2022-7-4 17:20:12',
    },
    {
        ordinal: 3, receiptNumber: '20220704001', username: 'YH003', name: '刘强丁', ipSrc: '11.21.31.11', CreationTime: '2022-7-4 17:15:12',
    }, {
        ordinal: 4, receiptNumber: '20220703005', username: 'YH004', name: '王智鹏', ipSrc: '11.21.31.11', CreationTime: '2022-7-4 17:22:12',
    }, {
        ordinal: 5, receiptNumber: '20220703004', username: 'YH005', name: '王培', ipSrc: '11.21.31.11', CreationTime: '2022-7-4 17:10:12',
    },
    {
        ordinal: 6, receiptNumber: '20220703003', username: 'YH006', name: '郑姚', ipSrc: '11.21.31.11', CreationTime: '2022-7-4 17:25:12',
    },
    {
        ordinal: 7, receiptNumber: '20220703002', username: 'YH007', name: '文崝', ipSrc: '11.21.31.11', CreationTime: '2022-7-4 17:24:12',
    },
    {
        ordinal: 8, receiptNumber: '20220703001', username: 'YH008', name: '曾岚', ipSrc: '11.21.31.11', CreationTime: '2022-7-4 17:25:20',
    },
]
var page = 1;
var counting = 8;
var oNumber = document.querySelector('#receiptNumber1');
var oDate = document.querySelector('#date');
var oSrc = document.querySelector('#ipSrc1');
var oUserName = document.querySelector('#username1');
var oName = document.querySelector('#name1');
var oInquire = document.querySelector('.inquire');
var oReset = document.querySelector('.reset');
var oAddSaveBtn = document.querySelector('.addSaveBtn');
var oAddLog = document.querySelector('.addLog');
var aTbody = document.querySelector('tbody');
var oPagination = document.querySelector('.pagination');
var oPrev = document.querySelector('.prev');
var oNext = document.querySelector('.next');

function render() {
    var str1 = oNumber.value;
    var str2 = oDate.value;
    var str3 = oSrc.value;
    var str4 = oUserName.value;
    var str5 = oName.value;
    var data1 = [];
    var data2 = [];
    var data3 = [];
    var data4 = [];
    var data5 = [];
    if (str1.trim() == '') {
        data1 = data;
    } else {
        for (var i = 0; i < data.length; i++) {
            if (data[i].receiptNumber.includes(str1)) {
                data1.push(data[i]);
            }
        }
    }
    if (str2.trim() == '') {
        data2 = data1;
    } else {
        for (var i = 0; i < data1.length; i++) {
            if (data1[i].CreationTime.includes(str2)) {
                data2.push(data1[i]);
            }
        }
    }
    if (str3.trim() == '') {
        data3 = data2;
    } else {
        for (var i = 0; i < data2.length; i++) {
            if (data2[i].ipSrc.includes(str3)) {
                data3.push(data2[i]);
            }
        }
    }
    if (str4.trim() == '') {
        data4 = data3;
    } else {
        for (var i = 0; i < data3.length; i++) {
            if (data3[i].username.includes(str4)) {
                data4.push(data3[i]);
            }
        }
    }
    if (str5.trim() == '') {
        data5 = data4;
    } else {
        for (var i = 0; i < data4.length; i++) {
            if (data4[i].name.includes(str5)) {
                data5.push(data4[i]);
            }
        }
    }
    aTbody.innerHTML = '';
    var renderArr = data5.slice((page - 1) * counting, page * counting);
    for (var i = 0; i < renderArr.length; i++) {
        var oTr = document.createElement('tr');
        oTr.innerHTML = `
    <td>${renderArr[i].ordinal}</td>
    <td>${renderArr[i].receiptNumber}</td>
    <td>${renderArr[i].username}</td>
    <td>${renderArr[i].name}</td>
    <td>${renderArr[i].ipSrc}</td>
    <td>${renderArr[i].CreationTime}</td>`;
        aTbody.appendChild(oTr);
    }
    var aPageBtn = document.querySelectorAll(".pageBtn");
    for (var i = 0; i < aPageBtn.length; i++) {
        oPagination.removeChild(aPageBtn[i].parentNode);
    }
    //根据数据的长度重新创建页码
    for (var i = 1; i <= Math.ceil(data5.length / counting); i++) {
        //创建li
        var oLi = document.createElement("li");
        //给li创建内容
        oLi.innerHTML = `<a class="pageBtn" href="#">${i}</a>`;
        //如果li和当前的页码一致，给他加一个选中的class
        if (i == page) {
            oLi.classList.add("active");
        }
        //在下一页的前面插入页码
        oPagination.insertBefore(oLi, oPagination.lastElementChild);
    }
}
render();
//查询
oInquire.addEventListener('click', inquireFn);
function inquireFn() {
    page = 1;
    render();
}
//给分页加事件
oPagination.addEventListener('click', changePageFn);
function changePageFn() {
    if (event.target.className == 'pageBtn') {
        page = event.target.innerHTML;
        render();
    }
};
//给上一页和下一页加事件
oPrev.addEventListener('click', prevFn);
oNext.addEventListener('click', nextFn);
function prevFn() {
    if (page > 1) {
        page--;
        render();
    }
}
function nextFn() {
    if (page < Math.ceil(data.length / counting)) {
        page++;
        render();
    }
}
//重置搜索框内容
oReset.onclick = function () {
    oNumber.value = '';
    oDate.value = '';
    oSrc.value = '';
    oUserName.value = '';
    oName.value = '';
}
//添加数据
oAddSaveBtn.addEventListener('click', addFn);
function addFn() {
    var addOrdinal = document.querySelector('.ordinal');
    var addReceiptNumber = document.querySelector('.receiptNumber');
    var addUsername = document.querySelector('.username');
    var addName = document.querySelector('.name');
    var addIpSrc = document.querySelector('.ipSrc');
    var addCreationTime = document.querySelector('.CreationTime');
    data.push({
        ordinal: addOrdinal.value,
        receiptNumber: addReceiptNumber.value,
        username: addUsername.value,
        name: addName.value,
        ipSrc: addIpSrc.value,
        CreationTime: addCreationTime.value,
    })
    render();
    addOrdinal.value = '';
    addReceiptNumber.value = '';
    addUsername.value = '';
    addName.value = '';
    addIpSrc.value = '';
    addCreationTime.value = '';
    $('#addModal').modal('hide')
}